<template>
  <div class="app">

    <!-- 顶部控件 -->
    <AppHeader></AppHeader>
    <div class="app-body top-container">
      <!-- 左侧菜单控件 -->
        <Sidebar @active-menu="activeMenu"></Sidebar>
        <main class="main">
            <div class="main-heading">
                <h2>{{activeTitle}}</h2>
            </div>
            <router-view></router-view>
        </main>
    </div>

    <!-- 底部控件 -->
    <AppFooter/>
  </div>
</template>

<script>
import AppHeader from './Header.vue'
import Sidebar from './Sidebar.vue'
import AppFooter from './Footer'

export default {
  components: {
    AppHeader,
    Sidebar,
    AppFooter,
  },
  data: function() {
      return {
          // 标题
          activeTitle: "",
      }
  },
  methods: {
      activeMenu: function(activeTitle){
          this.activeTitle = activeTitle;
      }
  },
  computed: {
    name () {
      return this.$route.name
    },

    list () {
      return this.$route.matched
    }
  }
}
</script>

<style scoped lang="scss">
    .app{
        background: #eceff1;
        .top-container{
            width: 1200px;
            margin: 0 auto;
            margin-top: 36px;
        }
        .main{
            width: 850px;
            padding: 36px 60px;
            position: relative;
            background: #fff;
        }
        .main-heading {
            position: relative;
            margin-bottom: 10px;
            padding-bottom: 10px;

            h2{
                color: #222;
                font-size: 18px;
                line-height: 28px;
                font-weight: 400;
            }
        }
    }

</style>
